<template>
  <div class="app-container">
    <el-col>
      <el-row>
        <el-card class="course-info-card">
          <el-col>
            <el-row style="width: 100%">
              <div style="width:100%;display: flex;justify-content: space-between">
                <div style="display: flex">
                  <el-image class="course-info-cover" fit="cover" :src="dataInfo.coverResource.path" alt="" />
                  <div class="course-name-prop-info">
                    <h3>{{ dataInfo.tsmCourse.name }}</h3>
                    <el-tag :type="dataInfo.tsmCourse.prop === 1 ? 'danger' : 'warning'">
                      {{ dataInfo.tsmCourse.prop === 1 ? '必修' : '选修' }}
                    </el-tag>
                  </div>
                </div>
                <div>
                  <el-progress :stroke-width="8" type="circle" :percentage="CourseProcess" />
                </div>
              </div>
            </el-row>
            <el-row>
              <p>
                {{ dataInfo.tsmCourse.remark }}
              </p>
            </el-row>
          </el-col>
        </el-card>
      </el-row>

      <el-row style="margin-top: 3em">
        <el-tabs v-model="tabActivity" class="course-tab" style="width: 100%">
          <el-tab-pane name="course-time-list" label="课程">
            <CourseTimeCard :class-info-list="dataInfo.classInfoList" />
          </el-tab-pane>
          <el-tab-pane name="course-ware-list" label="课件">
            <CoursewareCard :course-id="courseId"/>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-col>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { computed, onMounted, ref, onUpdated } from 'vue'
import { courseHistoryInfo } from '@/api/data/historydata.js'
import useUserStore from '@/store/modules/user.js'
import CourseTimeCard from '@/views/course/components/CourseTimeCard.vue'
import CoursewareCard from '@/views/course/components/CoursewareCard.vue'

const tabActivity = ref('course-time-list')
let router = useRouter()
let userStore = useUserStore()
const courseId = computed(() => router.currentRoute.value.params.courseId)
let dataInfo = ref({
  tsmCourse: {
    deptId: undefined,
    duration: 0,
    name: undefined,
    cover: undefined,
    prop: 0,
    remark: undefined
  },
  coverResource: {
    path: undefined
  },
  classInfoList: []
})
const CourseProcess = computed(() => {
  let max = 100
  let number = Math.floor(dataInfo.value.process * 100)
  if (Number.isNaN(number)) {
    return 0
  }
  if (number > max)
    return max
  return number
})
onMounted(() => {
  initCourseInfoData()
})
onUpdated(() => {
    initCourseInfoData();
})

function initCourseInfoData() {
  courseHistoryInfo(userStore.id, courseId.value).then(response => {
    dataInfo.value = response.data
  })
}
</script>
<style scoped lang="scss">
$border-radius: 12px;

.course-info-card {
  width: 100%;
}

.course-info-cover {
  width: 30%;
  border-radius: $border-radius;
}

.el-card {
  border: transparent;
  background: #ffffff;
  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, .04);
  border-radius: $border-radius;
}

.course-name-prop-info {
  h3 {
    font-weight: bold;
  }

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 2em
}

.course-tab :deep(.el-tabs__nav-wrap:after) {
  background-color: transparent;
}

.course-tab :deep(.el-tabs__content) {
  overflow: visible;
}
</style>